<template>
  <view class="shop-container">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <input
          type="text"
          v-model="searchInput"
          placeholder="青城山道教文创优品"
          class="search-input"
          @confirm="searchProducts"
      />
      <text class="search-bar-text">...</text>
    </view>

    <!-- 功能按钮栏 -->
    <view class="function-bar">
      <view class="function-item" v-for="item in functionItems" :key="item.text">
        <image :src="item.icon" class="function-icon" />
        <text class="function-text">{{ item.text }}</text>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="product-list">
      <view
          class="product-item"
          v-for="product in filteredProducts"
          :key="product.id"
          @click="goToProductDetail(product.id)"
      >
        <image :src="product.image" class="product-image" mode="aspectFit" />
        <view class="product-info">
          <text class="product-name">{{ product.name }}</text>
          <view class="product-price-and-sales">
            <text class="product-price">{{ product.price }}</text>
            <text class="product-sales">销量 {{ product.sales }}</text>
          </view>
          <view class="product-rating">
            <text class="rating-star" :style="{ color: getRatingColor(product.rating) }">★★★★★</text>
            <text class="rating-number">({{ product.rating }})</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchInput: '',
      functionItems: [
        { text: '订单', icon: 'https://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E5%95%86%E5%9F%8E/%E5%8A%9F%E8%83%BD%E6%8C%89%E9%92%AE%E6%A0%8F/%E8%AE%A2%E5%8D%95.png' },
        { text: '购物车', icon: 'https://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E5%95%86%E5%9F%8E/%E5%8A%9F%E8%83%BD%E6%8C%89%E9%92%AE%E6%A0%8F/%E8%B4%AD%E7%89%A9%E8%BD%A6.png' },
        { text: '消息', icon: 'https://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E5%95%86%E5%9F%8E/%E5%8A%9F%E8%83%BD%E6%8C%89%E9%92%AE%E6%A0%8F/%E6%B6%88%E6%81%AF.png' },
        { text: '物流', icon: 'https://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E5%95%86%E5%9F%8E/%E5%8A%9F%E8%83%BD%E6%8C%89%E9%92%AE%E6%A0%8F/%E7%89%A9%E6%B5%81.png' },
        { text: '优惠', icon: 'https://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E5%95%86%E5%9F%8E/%E5%8A%9F%E8%83%BD%E6%8C%89%E9%92%AE%E6%A0%8F/%E4%BC%98%E6%83%A0.png' }
      ],
      productList: [
        {
          id: 1,
          name: "青城山文创折扇",
          price: "￥32",
          sales: 300,
          rating: 4.5,
          image: "https://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8/%E9%9D%92%E5%9F%8E%E5%B1%B1%E6%96%87%E5%88%9B%E6%8A%98%E6%89%87.png"
        },
        {
          id: 2,
          name: "青城山文创帆布袋",
          price: "￥15",
          sales: 500,
          rating: 4.8,
          image: "http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8/%E5%B8%86%E5%B8%83%E8%A2%8B%20%281%29.png"
        },
        {
          id: 3,
          name: "青城山文创书签",
          price: "￥10",
          sales: 900,
          rating: 4.9,
          image: "https://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8/%E4%B9%A6%E7%AD%BE.png"
        },
        {
          id: 4,
          name: "青城山文创鸭舌帽",
          price: "￥28",
          sales: 400,
          rating: 4.0,
          image: "https://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8/%E9%B8%AD%E8%88%8C%E5%B8%BD.png",
        },
        {
          id: 5,
          name: "青城山文创手机壳",
          price: "￥12",
          sales: 400,
          rating: 4.0,
          image: "http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8/%E6%89%8B%E6%9C%BA%E5%A3%B3%20%282%29%20%281%29.png",
        },
        {
          id: 6,
          name: "青城山文创方形抱枕",
          price: "￥19.9",
          sales: 530,
          rating: 4.0,
          image: "http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8/%E6%96%B9%E5%BD%A2%E6%8A%B1%E6%9E%95%EF%BC%881%EF%BC%89.png",
        },
        {
          id: 7,
          name: "青城山文创明信片",
          price: "￥9.9",
          sales: 1030,
          rating: 5.0,
          image: "http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8/%E6%98%8E%E4%BF%A1%E7%89%87%20%281%29.png"
        },
        {
          id: 8,
          name: "青城山文创杯垫",
          price: "￥9.9",
          sales: 830,
          rating: 4.0,
          image: "http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8/%E6%9D%AF%E5%9E%AB%20%281%29.png"
        },
        {
          id: 9,
          name: "青城山文创T恤",
          price: "￥39.9",
          sales: 2830,
          rating: 4.0,
          image: "http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8/T%E6%81%A4%20%281%29.png"
        },
        {
          id: 10,
          name: "青城山文创钥匙扣",
          price: "￥5.9",
          sales: 1830,
          rating: 4.0,
          image: "http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8/%E9%92%A5%E5%8C%99%E6%89%A3%20%281%29.png"
        }
      ]
    };
  },
  computed: {
    filteredProducts() {
      if (!this.searchInput) return this.productList;
      return this.productList.filter(product =>
          product.name.includes(this.searchInput)
      );
    }
  },
  methods: {
    searchProducts() {
      console.log('搜索商品：', this.searchInput);
    },
    getRatingColor(rating) {
      if (rating >= 4.5) return 'gold';
      if (rating >= 3.5) return 'orange';
      return '#ccc';
    },
    goToProductDetail(id) {
      uni.redirectTo({
        url: `/pages/product/product?id=${id}`
      });
    }
  }
};
</script>

<style lang="scss">
.shop-container {
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
}

.search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px;
  background-color: #f5f5f5;
  height: 60px;
}

.search-input {
  flex: 1;
  height: 40px;
  border: none;
  border-radius: 20px;
  padding: 0 10px;
  background-color: #fff;
}

.search-bar-text {
  color: #666;
  font-weight: bold;
  margin-left: 10px;
}

.function-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 80px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.function-icon {
  width: 30px;
  height: 30px;
}

.function-text {
  margin-top: 5px;
  font-size: 14px;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px;
  overflow-y: auto;
  background-color: #f5f5f5;
}

.product-item {
  width: 48%;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product-image {
  width: 100%;
  height: 150px;
  object-fit: fill;
}

.product-info {
  padding: 10px;
  width: 100%;
}

.product-name {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-price-and-sales {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.product-price {
  font-size: 16px;
  color: red;
}

.product-sales {
  font-size: 14px;
  color: #666;
}

.product-rating {
  display: flex;
  align-items: center;
  //justify-content: center;
}

.rating-star {
  font-size: 16px;
  margin-right: 5px;
}

.rating-number {
  font-size: 14px;
  color: #666;
}
</style>
